<template>
  <div>
    <el-row
      :gutter="15"
      class="main"
      :style="{ margin: '0 auto', width: '100%' }"
    >
      <el-form
        ref="elFormGradeNo"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
      >
        <template>
          <el-col :span="24">
            <el-form-item label-width="0">
              <div class="jsbos-common-title">
                <h2>选择题库</h2>
                <div class="jsbos-common-head-right">
                  <el-button icon="el-icon-plus" @click="addQuestionLibs()"
                    >添加试题库
                  </el-button>
                </div>
              </div>
              <el-table
                :data="questionLibs"
                size="mini"
                border
                :summary-method="getSummaries"
                show-summary
              >
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  :align="'center'"
                />
                <el-table-column prop="questionLibName" label="题库名称">
                </el-table-column>
                <el-table-column prop="selectTi" label="单选题">
                  <template slot-scope="scope">
                    共{{ scope.row.selectTi }}题
                  </template>
                </el-table-column>
                <el-table-column prop="multiple" label="多选题">
                  <template slot-scope="scope">
                    共{{ scope.row.multiple }}题
                  </template>
                </el-table-column>
                <el-table-column prop="determine" label="判断题">
                  <template slot-scope="scope">
                    共{{ scope.row.determine }}题
                  </template>
                </el-table-column>
                <el-table-column prop="blank" label="填空题">
                  <template slot-scope="scope">
                    共{{ scope.row.blank }}题
                  </template>
                </el-table-column>
                <el-table-column prop="answers" label="问答题">
                  <template slot-scope="scope">
                    共{{ scope.row.answers }}题
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="cases" label="案例题">
                  <template slot-scope="scope">
                    共{{ scope.row.cases }}题
                  </template>
                </el-table-column> -->

                <el-table-column label="操作" width="50">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      class="jsbos-table-delBtn"
                      @click="delQuestionLibs(scope.$index)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <div class="table-actions" @click="addQuestionLibs()">
                <el-button type="text" icon="el-icon-plus">添加</el-button>
              </div> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="0">
              <div class="jsbos-common-title">
                <h2>设置分值</h2>
              </div>
              <el-table :data="questionRules" size="mini" border>
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  :align="'center'"
                />
                <el-table-column prop="fullName" label=""> </el-table-column>
                <el-table-column prop="selectTi" label="单选题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'missedScore'">/</span>
                    <span v-else-if="scope.row.enCode == 'total'">{{
                      scope.row.selectTi
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.selectTi"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      v-model="scope.row.selectTi"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="multiple" label="多选题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'total'">{{
                      scope.row.multiple
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.multiple"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      :disabled="scope.row.enCode == 'total'"
                      v-model="scope.row.multiple"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="determine" label="判断题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'missedScore'">/</span>
                    <span v-else-if="scope.row.enCode == 'total'">{{
                      scope.row.determine
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.determine"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      v-model="scope.row.determine"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="blank" label="填空题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'missedScore'">/</span>
                    <span v-else-if="scope.row.enCode == 'total'">{{
                      scope.row.blank
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.blank"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      v-model="scope.row.blank"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column prop="answers" label="问答题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'missedScore'">/</span>
                    <span v-else-if="scope.row.enCode == 'total'">{{
                      scope.row.answers
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.answers"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      v-model="scope.row.answers"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="cases" label="案例题">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enCode == 'missedScore'">/</span>
                    <span v-else-if="scope.row.enCode == 'total'">{{
                      scope.row.cases
                    }}</span>
                    <el-input-number
                      v-else-if="scope.row.enCode == 'num'"
                      v-model="scope.row.cases"
                      placeholder="题数"
                      :style="{ width: '100%' }"
                      :step="1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    />
                    <el-input-number
                      v-else
                      v-model="scope.row.cases"
                      placeholder="分值"
                      :style="{ width: '100%' }"
                      :precision="1"
                      :step="0.1"
                      :min="0"
                      controls-position="right"
                      @change="sumTotalScore"
                    >
                    </el-input-number>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="jsbos-common-title" style="margin-bottom: 20px">
              <h2>总分与及格线</h2>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label="总分：" prop="myScore">
              <template>
                {{ dataForm.myScore }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="及格线(%)：" prop="passLine">
              <el-input-number
                v-model="dataForm.passLine"
                placeholder="数字文本"
                :max="100"
                :min="0"
                :step="1"
                controls-position="right"
                @change="sumPassScore"
              >
              </el-input-number>
              <span style="color: rgb(140, 140, 140); margin-left: 30px"
                >及格分（{{ dataForm.passScore }}） = 总分（{{
                  dataForm.myScore
                }}） * 及格线（{{ dataForm.passLine }}%）</span
              >
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <QuestionLibDialog
      ref="questionLibRef"
      v-if="questionLibVisible"
      :folders="dataForm.folders"
      @table-change="selectQuestionLibChange"
    >
    </QuestionLibDialog>
  </div>
</template>
<script>
import QuestionLibDialog from "@/views/exam/paper/questionLibDialog.vue";

export default {
  components: { QuestionLibDialog },
  props: {
    dataFormRandom: {
      type: Object,
      default: {},
    },
    gradeRules: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      questionLibVisible: false,
      paperType: "2", // 1-固定版本 2-随机版本
      questionLibs: [],
      questionRules: [],
      dataForm: this.dataFormRandom,
      myScore: 0,
      rules: {},
      paperRules: [
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "selectTi",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "multiple",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "determine",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "blank",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "answers",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
        {
          paperId: undefined,
          folderId: undefined,
          questionType: "cases",
          difficultyGradeId: 0,
          questionNum: 0,
          score: 1,
          missedScore: 0,
        },
      ],
    };
  },
  computed: {},
  watch: {
    dataFormRandom() {
      this.dataForm = this.dataFormRandom;
    },
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      console.log("this.dataForm", this.dataForm);
      this.setPaperRules();
      this.selectQuestionLibChange(this.dataForm.folderList);
    },
    getPaperRules() {
      let _num = {};
      let _score = {};
      let _missedScore = {};
      this.questionRules.forEach((item, index) => {
        if (item.enCode == "num") _num = item;
        if (item.enCode == "score") _score = item;
        if (item.enCode == "missedScore") _missedScore = item;
      });
      this.paperRules.forEach((item) => {
        this.$set(item, "questionNum", _num[item.questionType]);
        this.$set(item, "score", _score[item.questionType]);
        this.$set(item, "missedScore", _missedScore[item.questionType]);
      });
      return this.paperRules;
    },
    setPaperRules() {
      let _rules = this.gradeRules;
      _rules = _rules && _rules.length > 0 ? _rules : this.paperRules;
      let _num = {
        enCode: "num",
        fullName: "抽取题目数（道）",
      };
      let _score = {
        enCode: "score",
        fullName: "批量设置分值（分）",
      };
      let _missedScore = {
        enCode: "missedScore",
        fullName: "漏选设置分值（分）",
      };
      _rules.forEach((item) => {
        this.$set(_num, item.questionType, item.questionNum);
        this.$set(_score, item.questionType, item.score);
        this.$set(_missedScore, item.questionType, item.missedScore);
      });
      this.questionRules.push(_num);
      this.questionRules.push(_score);
      this.questionRules.push(_missedScore);
      // 计算 总分
      this.sumTotalScore();
    },
    // 计算 总分
    sumTotalScore() {
      let _num = {};
      let _score = {};
      let _totalIdx;
      this.questionRules.forEach((item, index) => {
        if (item.enCode == "num") _num = item;
        if (item.enCode == "score") _score = item;
        if (item.enCode == "total") _totalIdx = index;
      });
      let _total = {
        enCode: "total",
        fullName: "合计（分）",
        selectTi: _num.selectTi * _score.selectTi,
        multiple: _num.multiple * _score.multiple,
        determine: _num.determine * _score.determine,
        blank: _num.blank * _score.blank,
        answers: _num.answers * _score.answers,
        cases: _num.cases * _score.cases,
      };
      if (_totalIdx) {
        this.questionRules[_totalIdx] = _total;
      } else {
        this.questionRules.push(_total);
      }
      // 总分
      this.dataForm.myScore =
        _total.selectTi +
        _total.multiple +
        _total.determine +
        _total.blank +
        _total.answers +
        _total.cases;
      this.myScore = this.dataForm.myScore;
      // 计算 及格线
      this.sumPassScore();
    },
    // 计算 及格线
    sumPassScore() {
      let _passLine = this.dataForm.passLine;
      this.dataForm.passLine = _passLine ? _passLine : 0;
      _passLine = new Number(this.dataForm.passLine);
      let _totalScore = this.dataForm.myScore;
      this.dataForm.myScore = _totalScore ? _totalScore : 0;
      _totalScore = new Number(this.dataForm.myScore);
      this.dataForm.passScore = Math.round((_passLine * _totalScore) / 100);
      this.$forceUpdate();
    },
    // 添加试题库 弹框
    addQuestionLibs() {
      this.questionLibVisible = true;
      this.$nextTick(() => {
        this.$refs.questionLibRef.initData();
      });
    },
    // 选中试题库 change事件
    selectQuestionLibChange(multipleSelection) {
      if (multipleSelection) {
        let _folders = [];
        let _paperFolderList = [];
        let _questionLibs = [];
        multipleSelection.forEach((item) => {
          // 平铺题库 题型题数量
          let _questionLib = {
            paperId: undefined,
            questionLibId: item.id,
            questionLibName: item.fullName,
            selectTi: item.questions.selectTi ? item.questions.selectTi : 0,
            multiple: item.questions.multiple ? item.questions.multiple : 0,
            determine: item.questions.determine ? item.questions.determine : 0,
            blank: item.questions.blank ? item.questions.blank : 0,
            answers: item.questions.answers ? item.questions.answers : 0,
            cases: item.questions.cases ? item.questions.cases : 0,
          };
          _questionLibs.push(_questionLib);
          _paperFolderList.push(item);
          _folders.push(item.id);
        });
        this.questionLibs = _questionLibs;
        this.dataForm.folderList = _paperFolderList;
        this.dataForm.folders = _folders;
      } else {
        this.questionLibs = [];
        this.dataForm.folderList = [];
        this.dataForm.folders = [];
      }
      this.questionLibVisible = false;
    },
    //删除试题库
    delQuestionLibs(index) {
      this.questionLibs.splice(index, 1);
      this.dataForm.folders.splice(index, 1);
      this.dataForm.folderList.splice(index, 1);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计（题）";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
  },
};
</script>
